import Layouts from '@/src/components/Layouts'
import React, { useEffect, useState } from 'react'
import { Card, Button, Switch } from "antd"
import LiveSearch from '@/src/components/Livesearch'
import http from '@/src/utils/https'
import Statu from './statu'
import { ThunderboltOutlined } from '@ant-design/icons';
import Link from 'next/link';
import { useRouter } from 'next/dist/client/router';
import Paginations from '@/src/components/Pagination'
const Live = () => {
  let [liveList, setLiveList] = useState([] as any)
  let router = useRouter()


  //请求直播列表
  const getlive = async () => {
    let res = await http.get("/live");
    if (res.data.code == 200) {
      console.log(res.data.data, "live list")
      let newList = res.data.data.slice((page-1)*pagesize,page*pagesize)
      setLiveList(newList)
      SetTotal(res.data.data.length)
    }
  }
  useEffect(() => {
    if (liveList.length <= 0) {
      getlive()
    }
  }, [])
  const ischeck = async (isc: any, id: any) => {
    let res = await http.post("/live", { id, statu: isc })
    if (res.data.code == 200) {
      getlive()
    }

  }

  const onsearch = async (obj:any) =>{
      let objs = { };
      if(obj.broker){
        objs = {name:obj.broker}
      }
      if(typeof obj.status != "undefined"){
        objs ={...objs,statu:obj.status}
      }
      let res = await http.get("/live",{params:objs})
      if (res.data.code == 200) {
        console.log(res.data.data, "live list")
        SetTotal(res.data.data.length)
        let newList = res.data.data.slice((page-1)*pagesize,page*pagesize)
      setLiveList(newList)
      }
  }

  //删除
  const handeldel =async (id:any) =>{
    let res = await http.delete("/live",{params:{id}})
    console.log(res,"delete")
    if (res.data.code == 200) {
      getlive()
    }
  }

  //分页
  let [page, setPage] = useState(1);
  let [pagesize, SetpageSize] = useState(10);
  let [total, SetTotal] = useState(100);
   
  const handelpage = (page: number, pagesize: number) => {
    // console.log(page, pagesize, "page")
    setPage(page)
    SetpageSize(pagesize)
  }
  const handelsize = (page: number, pagesize: number) => {
    // console.log(page, pagesize, "size")
    setPage(page)
    SetpageSize(pagesize)
  }
  return (
    <Layouts>
      <Card style={{ width: "100%" ,minWidth:"800px" }} bordered={false}>
        <h2>
          直播管理
        </h2>
      </Card>
      <Card style={{ width: "100%",minWidth:"800px" }} bordered={false}>
        <LiveSearch livesearch={onsearch}></LiveSearch>
      </Card>
      <Card style={{ width: "100%" }} bordered={false}>
        {
          liveList.length > 0 ?
            <div style={{
              width: "100%",
              display: "flex",
              flexWrap: "wrap",
              minWidth: "800px"
            }}>
              {
                liveList.map((item: any) => {
                  return (
                    <div className='live_box' key={item.id}
                      style={{
                        width: "18%",
                        height: "180px",
                        padding: "5px",
                        position: "relative",
                        margin: "0 5px"
                      }}
                    >
                      <div style={{ width: "100%", height: "100px", display: "block", position: "relative" }}>
                        <img style={{ width: "100%", height: "100px", display: "block" }} src={item.url} alt="" />
                        <span style={{ color: "#f90", position: "absolute", right: "3%", top: "3%" }} ><ThunderboltOutlined />  {item.likecount} </span>
                        <span style={{ background: "cadetblue", position: "absolute", left: "3%", bottom: "3%", display: "block", padding: "3px 5px", borderRadius: "5px", opacity: "0.6" }} >{+item.statu ? '进入直播' : '回放'} </span>
                        <div className='mark' style={{
                          display: "none",
                          position: "absolute",
                          left: "0",
                          top: "0",
                          width: "100%",
                          height: "100%",
                          background: "rgba(0,0,0,0.6)",
                          zIndex: "3333",
                          color: "#fff",
                          padding: "5px",
                        }}>
                          <p>员工工号：{item.id}</p>
                          <p>卖出商品：{item.buycount}</p>
                          <p>观看人数：{item.lookcount}</p>
                          <p>销售额：{item.shopcount}</p>
                        </div>
                      </div>
                      <p style={{ fontWeight: "bold" }}>{item.title}</p>
                      <p style={{ display: "flex", justifyContent: "space-between" }}> <span>{item.name}</span> <span>{item.statime}</span></p>
                      <div style={{ display: "flex", justifyContent: "space-between" }}>
                        <Button type="link">
                           <Link href={{
                              pathname:"/live/"+item.id,
                              query:{obj:JSON.stringify(item)}
                           } as any} target="_blank"><span>{+item.statu ? '进入直播' : '回放' }</span></Link>
                        </Button>
                        {
                         +item.statu ? <Statu statu={item} ischeck={ischeck}></Statu>
                         : <Button type="link" onClick={()=>handeldel(item.id)}>删除</Button>
                        }
                      </div>


                    </div>
                  )
                })
              }
            </div>
            : <div>暂无直播数据</div>
        }
      </Card>
        <Card>
          <Paginations total={total} page={page} pagesize={pagesize} onpage={handelpage} onsize={handelsize}></Paginations>
        </Card>
    </Layouts>
  )
}

export default Live